import CTextAreaForm from '@/components/CTextAreaForm/CTextAreaForm'
import IJobVO from '@/model/vo/job/IJobVO'
import useEffectUserPage from '@/useEffect/useEffectUserPage'
import { flatTree, listToTree } from '@/util/CommonUtil'
import { Col, Form, useFormState } from '@douyinfe/semi-ui'
import { OptionProps } from '@douyinfe/semi-ui/lib/es/select'
import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree'
import { useEffect, useState } from 'react'

// 获取 下拉选的数据
export function getJobFormSelectData(modalVisible: boolean) {
  const { userList } = useEffectUserPage(modalVisible)
  return { userList }
}

interface IJobFormItem {
  userList: OptionProps[]
  jobTree: IJobVO[]
}

export default function JobFormItem(props: IJobFormItem) {
  const formState = useFormState()
  const [treeData, setTreeData] = useState<TreeNodeData[]>() // 上级菜单（树结构）

  useEffect(() => {
    if (props.jobTree) {
      // 先扁平化树结构
      const jobList = flatTree(
        props.jobTree,
        true,
        (item) => item.id !== formState.values.id // 不要本节点
      ).map((item) => ({
        id: item.id,
        key: item.id,
        value: item.id,
        label: item.name,
        parentId: item.parentId,
      })) as TreeNodeData[]

      // 再 listToTree
      setTreeData(listToTree(jobList))
    }
  }, [props.jobTree])

  return (
    <>
      <Col span={24}>
        <Form.TreeSelect
          field="parentId"
          showClear
          label="上级岗位"
          filterTreeNode
          showFilteredOnly
          treeData={treeData}
          className="w100"
          virtualize={{
            height: 300,
            itemSize: 28,
          }}
        ></Form.TreeSelect>
      </Col>
      <Col span={24}>
        <Form.Input
          field="name"
          rules={[{ required: true, message: '请输入岗位名称' }]}
          showClear
          label="岗位名称"
        />
      </Col>
      <Col span={24}>
        <Form.Select
          multiple
          field="userIdSet"
          showClear
          label="绑定用户"
          filter
          className="w100"
          optionList={props.userList}
          maxTagCount={10}
        ></Form.Select>
      </Col>
      <Col span={24}>
        <Form.InputNumber
          showClear
          className="w100"
          field="orderNo"
          label="排序号"
        />
      </Col>
      <Col span={24}>
        <Form.Switch field="enableFlag" label="启用" />
      </Col>
      <Col span={24}>
        <CTextAreaForm></CTextAreaForm>
      </Col>
    </>
  )
}
